<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from "vue";

import PieChart from "@/components/Charts/PieChart.vue";
import RingChart from "@/components/Charts/RingChart.vue";
export default {
  components: { PieChart, RingChart },
  setup() {
    const state = reactive({
      // labelList: ["Mon", "Tue", "Wed", "Thu", "Fri"],
      labelList: [],
      // dataList: [150, 230, 224, 218, 135],
      dataList: [],
      form: {
        gateId: null,
        month: 5
      },
      title: "出入口客流统计",
      isGetData: false,// 是否获取到数据，异步更新子组件
      mothStr: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
    });
    const { proxy } = getCurrentInstance();
    onMounted(async () => {
      proxy.$API.statGate.recentlyMonthFlowList.get(state.form).then((data) => {
        data.forEach(element => {
          state.labelList.push(state.mothStr[parseInt(element['gdDate'].slice(5, 7))])
          state.dataList.push(parseInt(element['gdCountIn']))
        });
        state.isGetData = true
      });
    });
    return { ...toRefs(state) };
  },
};
</script>

<template>
  <div style="display: flex; height: 50%" v-if="isGetData">
    <PieChart :title="title" :labelList="labelList" :dataList="dataList" />
  </div>
  <div style="display: flex; height: 50%" v-if="isGetData">
    <RingChart :title="title" :labelList="labelList" :dataList="dataList" />
  </div>
</template>

<style scoped></style>